// src/pages/EvaluationDashboard.tsx
import React from 'react';
import {
  Box,
  Grid,
  Paper,
  Typography,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Button,
  useTheme,
  CssBaseline,
  ThemeProvider,
  createTheme,
} from '@mui/material';
import ListAltIcon from '@mui/icons-material/ListAlt';
import ShareIcon from '@mui/icons-material/Share';
import BarChartIcon from '@mui/icons-material/BarChart';
import DescriptionIcon from '@mui/icons-material/Description';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
import {
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
} from 'recharts';

const data = [
  { subject: '数据', A: 120, fullMark: 150 },
  { subject: '技术', A: 98, fullMark: 150 },
  { subject: '流程', A: 86, fullMark: 150 },
  { subject: '组织', A: 99, fullMark: 150 },
  { subject: '战略', A: 85, fullMark: 150 },
];

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    background: {
      default: '#0E1A2B',
      paper: 'rgba(30,38,51,0.8)',
    },
    primary: {
      main: '#2E67F6',
    },
    text: {
      primary: '#ECEFF4',
      secondary: '#A3AFC0',
    },
  },
});

const cardStyle = {
  position: 'relative' as const,
  p: 2,
  border: '1px solid rgba(46,103,246,0.5)',
  borderRadius: 2,
  backgroundColor: 'background.paper',
  minHeight: 300,
  display: 'flex',
};

const previewBox = {
  flex: 1,
  border: '1px solid rgba(46,103,246,0.8)',
  borderRadius: 1,
  p: 2,
  ml: 2,
};

const EvaluationDashboard: React.FC = () => {
  return (
    <ThemeProvider theme={darkTheme}>
      <CssBaseline />
      <Box px={4} py={3}>
        <Grid container spacing={3}>
          {/* 自动化任务设置 */}
          <Grid item xs={12} md={6}>
            <Paper sx={cardStyle}>
              <Box flex={1}>
                <Box display="flex" alignItems="center" mb={2}>
                  <ListAltIcon sx={{ color: 'primary.main', mr: 1 }} />
                  <Typography variant="h6">自动化任务设置</Typography>
                </Box>
                <List dense disablePadding>
                  {[
                    '根据评估周期和时间节点设置自动化任务',
                    '选择评估模型和数据来源配置',
                    '设置任务执行频率（每月/每季度）',
                    '查看任务执行状态和历史记录',
                  ].map((text) => (
                    <ListItem key={text}>
                      <ListItemIcon>
                        <CheckCircleIcon sx={{ color: '#44C28D' }} />
                      </ListItemIcon>
                      <ListItemText primary={text} />
                    </ListItem>
                  ))}
                </List>
              </Box>
              <Box sx={previewBox}>
                <Typography variant="subtitle2" gutterBottom>
                  任务设置界面
                </Typography>
                <Typography>任务名称：Q2 数字化能力评估</Typography>
                <Typography>评估模型：企业数字化转型V2.1</Typography>
                <Typography>执行周期：每季度（自动）</Typography>
                <Typography>下次执行：2025-06-30</Typography>
              </Box>
            </Paper>
          </Grid>

          {/* 评估结果定向分发 */}
          <Grid item xs={12} md={6}>
            <Paper sx={cardStyle}>
              <Box flex={1}>
                <Box display="flex" alignItems="center" mb={2}>
                  <ShareIcon sx={{ color: 'primary.main', mr: 1 }} />
                  <Typography variant="h6">评估结果定向分发</Typography>
                </Box>
                <List dense disablePadding>
                  {[
                    '根据用户权限设置差异化分发',
                    '选择特定用户、角色或部门',
                    '自动过滤不同层级、维度的结果',
                    '支持站内信、邮件等多种通知方式',
                  ].map((text) => (
                    <ListItem key={text}>
                      <ListItemIcon>
                        <CheckCircleIcon sx={{ color: '#44C28D' }} />
                      </ListItemIcon>
                      <ListItemText primary={text} />
                    </ListItem>
                  ))}
                </List>
              </Box>
              <Box sx={previewBox}>
                <Typography variant="subtitle2" gutterBottom>
                  分发设置界面
                </Typography>
                <Grid container spacing={1}>
                  {[
                    ['高层管理', '全部结果'],
                    ['部门主管', '本部门数据'],
                    ['项目负责人', '相关项目'],
                  ].map(([role, data]) => (
                    <React.Fragment key={role}>
                      <Grid item xs={6}>
                        <Paper
                          variant="outlined"
                          sx={{
                            p: 1,
                            borderColor: 'rgba(46,103,246,0.8)',
                            borderRadius: 1,
                          }}
                        >
                          <Typography variant="body2">{role}</Typography>
                        </Paper>
                      </Grid>
                      <Grid item xs={6}>
                        <Typography variant="body2">{data}</Typography>
                      </Grid>
                    </React.Fragment>
                  ))}
                </Grid>
              </Box>
            </Paper>
          </Grid>

          {/* 智能评估结果可视化 */}
          <Grid item xs={12} md={6}>
            <Paper sx={cardStyle}>
              <Box flex={1}>
                <Box display="flex" alignItems="center" mb={2}>
                  <BarChartIcon sx={{ color: 'primary.main', mr: 1 }} />
                  <Typography variant="h6">智能评估结果可视化</Typography>
                </Box>
                <List dense disablePadding>
                  {[
                    '雷达图展示企业整体数智化能力',
                    '折线图展示项目进展和逾期情况',
                    '柱状图/饼图展示各指标得分分布',
                    '支持钻取、筛选等交互操作',
                  ].map((text) => (
                    <ListItem key={text}>
                      <ListItemIcon>
                        <CheckCircleIcon sx={{ color: '#44C28D' }} />
                      </ListItemIcon>
                      <ListItemText primary={text} />
                    </ListItem>
                  ))}
                </List>
              </Box>
              <Box sx={{ ...previewBox, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <RadarChart outerRadius={80} width={200} height={200} data={data}>
                  <PolarGrid />
                  <PolarAngleAxis dataKey="subject" />
                  <PolarRadiusAxis angle={30} domain={[0, 150]} />
                  <Radar name="得分" dataKey="A" stroke="#2E67F6" fill="#2E67F6" fillOpacity={0.3} />
                </RadarChart>
              </Box>
            </Paper>
          </Grid>

          {/* 评估报告生成与下载 */}
          <Grid item xs={12} md={6}>
            <Paper sx={cardStyle}>
              <Box flex={1}>
                <Box display="flex" alignItems="center" mb={2}>
                  <DescriptionIcon sx={{ color: 'primary.main', mr: 1 }} />
                  <Typography variant="h6">评估报告生成与下载</Typography>
                </Box>
                <List dense disablePadding>
                  {[
                    '自动生成专业评估报告',
                    '支持PDF 和Word 格式下载',
                    '内容包括评估概述、成熟度得分与等级',
                    '提供各能力域分析、优势与劣势总结',
                  ].map((text) => (
                    <ListItem key={text}>
                      <ListItemIcon>
                        <CheckCircleIcon sx={{ color: '#44C28D' }} />
                      </ListItemIcon>
                      <ListItemText primary={text} />
                    </ListItem>
                  ))}
                </List>
              </Box>
              <Box sx={previewBox}>
                <Typography variant="subtitle2" gutterBottom>
                  报告预览
                </Typography>
                <Typography>企业数字化能力评估报告</Typography>
                <Typography>生成日期：2025-06-19</Typography>
                <Box mt={2} display="flex" gap={1}>
                  <Button
                    variant="contained"
                    startIcon={<PictureAsPdfIcon />}
                    size="small"
                  >
                    PDF
                  </Button>
                  <Button
                    variant="contained"
                    startIcon={<InsertDriveFileIcon />}
                    size="small"
                  >
                    Word
                  </Button>
                </Box>
                <Typography variant="body2" mt={1} color="text.secondary">
                  内容：评估概述、成熟度等级、能力域分析、
                  优势与劣势总结、改进建议
                </Typography>
              </Box>
            </Paper>
          </Grid>
        </Grid>
      </Box>
    </ThemeProvider>
  );
};

export default EvaluationDashboard;
